import { message, PageHeader, Breadcrumb, Modal, Space, Button, Divider, Skeleton, Tag } from 'antd';
import RichText from '@/components/RichText'
import styles from './style.less';
import { history } from 'umi';
import { useState, useEffect } from 'react';
import { getById, updateArticleAcl, releaseArticle } from '@/services/doc/article'
import UserBrief from '@/components/UserBrief'
import { HeartOutlined, EyeOutlined } from '@ant-design/icons'
import ProjectComment from '@/pages/projects/components/ProjectComment'
import AclPop from '@/pages/projects/components/ProjectDoc/AclPop'
import HistoryIcon from '@/pages/projects/components/ProjectDoc/HistoryIcon'
import LikeIcon from '@/pages/projects/components/ProjectDoc/LikeIcon'

import HistoryArticle from './HistoryArticle'
import { DOC_TYPE } from '@/consts/doc'


const ArtcleDetail = (props) => {

    const {
        docId,
        projectId,
        onLoadDetail,
        projectPermission,
    } = props;

    const [docDetail, setDocDetail] = useState();
    const [getDetailLoading, setGetDetailLoading] = useState(false)
    const [permision, setPermission] = useState();
    const [showHistoryArticle, setShowHistoryArticle] = useState();

    useEffect(() => {
        setPermission({
            ...projectPermission?.article
        })
    }, [projectPermission])

    useEffect(() => {
        console.log("docId", docId)
        if (docId) {
            setGetDetailLoading(true)
            getById(projectId, docId)
                .then(result => {
                    setDocDetail(result?.data)
                    setGetDetailLoading(false)
                    if (onLoadDetail) {
                        onLoadDetail(result?.data)
                    }
                })
        }
    }, [docId])

    const onSaveAclData = (aclData) => {
        console.log(aclData)
        updateArticleAcl(projectId, docId, {
            acl: aclData.acl,
            userIds: aclData.userIds
        }).then(() => {
            setDocDetail({
                ...docDetail,
                acl: aclData.acl,
                aclUserList: aclData.aclUsers,
            })
        })
    }
    const goEdit = () => {
        history.push(`/projects/${projectId}/article`, {
            docId: docId
        })
        return
    }

    const doRelease = () => {
        Modal.confirm({
            title: "是否确认发布",
            onOk: () => {
                releaseArticle(projectId, docId).then((result) => {
                    message.success("发布成功!")
                    setDocDetail({
                        ...docDetail,
                        status: 1
                    })
                })
            }
        })
    }

    const showHistory = (data) => {
        setShowHistoryArticle(data)
        return true;
    }

    const onLikeChange = (likeRet) => {
        if (likeRet.isLike === 1) {
            setDocDetail({
                ...docDetail,
                isLike: likeRet.isLike,
                likeCnt: docDetail?.likeCnt + 1
            })
        } else {
            setDocDetail({
                ...docDetail,
                isLike: likeRet.isLike,
                likeCnt: docDetail?.likeCnt - 1
            })
        }
    }

    const renderDocExtra = () => {
        const actions = [];

        if (permision?.edit) {
            actions.push(<Button key="edit" onClick={goEdit}>编辑</Button>);
            if (docDetail?.status === 0) {
                actions.push(<Button key="publish" type="primary" onClick={doRelease}>发布</Button>);
            }
        }
        // actions.push(<div className={styles.operIcon} key="share"> <Popover placement="bottom" title="分享连接"><ShareAltOutlined /></Popover></div>);
        actions.push(<HistoryIcon
            docId={docId}
            showHistory={showHistory}
            projectId={projectId}
            docType={DOC_TYPE.ARTICLE}
            key="history"></HistoryIcon>);

        actions.push(<AclPop
            key="acl"
            projectId={projectId}
            docId={docId}
            onSave={onSaveAclData}
            editPermiission={permision.edit}
            acl={docDetail?.acl}
            aclUsers={docDetail?.aclUserList}
        ></AclPop>)
        return actions
    }
    if (!docDetail || getDetailLoading) {
        return <Skeleton></Skeleton>
    }

    return (<div className={styles.docBody}>
        <div className={styles.header}>
            <PageHeader
                // breadcrumb={dirRoutes}
                title={<div className={styles.title}>{docDetail?.name || "未命名"} </div>}
                extra={renderDocExtra()}
            >
                <Space className={styles.docInfos} size={16}>
                    {docDetail?.status === 0 && <Tag>未发布</Tag>}
                    <UserBrief user={docDetail?.user}></UserBrief>
                    <div>
                        <EyeOutlined /> {docDetail?.viewCnt}
                    </div>
                    <div>
                        <LikeIcon docId={docId}
                            projectId={projectId}
                            onLikeChange={onLikeChange}
                            docType={DOC_TYPE.ARTICLE}
                            isLike={docDetail?.isLike}
                            likeCnt={docDetail?.likeCnt} />
                    </div>
                </Space>
            </PageHeader>
            {docDetail?.abstractTitle &&
                <div className={styles.abstractTitle}><p>摘要：{docDetail?.abstractTitle}</p></div>
            }
        </div>
        <div className={styles.content}>
            <RichText value={docDetail?.content?.text}>
            </RichText>
        </div>
        <div className={styles.footInfo}>
            <div>创建于： {docDetail?.createTime}</div>
        </div>
        <div className={styles.comment}>
            <Divider plain>评论</Divider>
            <ProjectComment projectId={projectId} bizId={docDetail?.id} bizType="article" />
        </div>
        <HistoryArticle historyData={showHistoryArticle}
            onClose={() => {
                setShowHistoryArticle(null)
            }}
        ></HistoryArticle>
    </div>)
}

export default ArtcleDetail;